/**
* Description: 登录首页
*
* Created by hrx on 2023/9/18
*/
<template>
  <div class="login">
    <div class="login-view">
      <div class="login-title">
        手卫生管理系统-登录
      </div>
      <div class="login-form">
        <el-form ref="ruleFormRef" :model="formData" status-icon :rules="rules" label-width="80px"
                 class="demo-ruleForm">
          <el-form-item label="用户名" prop="userAccount">
            <el-input v-model="formData.userAccount" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="formData.password" type="password" autocomplete="off"/>
          </el-form-item>
        </el-form>
      </div>
      <div class="btn-group">
        <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref, reactive} from "vue"
import type {FormInstance} from 'element-plus'
import {ElMessage} from 'element-plus'
import {useRouter} from "vue-router";
import {loginApi, loginParams} from "@/api/login";
import {saveLocal} from '@/utils/local';

const ruleFormRef = ref<FormInstance>()

const formData = reactive<loginParams>({
  userAccount: "",
  password: "",
  merchantCode: 1
})

const router = useRouter();

const rules = {
  userAccount: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 3, max: 20, message: '长度只能3-20', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 3, max: 10, message: '长度只能3-10', trigger: 'blur'},
  ],
}

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      let res = await loginApi(formData)
      if(res.data.code == 0){
        saveLocal('token', res.data.data);
        ElMessage.success(res.data.msg)
        router.push('/');
      }
    } else {
      return false
    }
  })
}
const resetForm = () => {
  formData.userAccount = '';
  formData.password = '';
}
</script>
<style lang="scss" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("@/assets/img/background.jpg");
  height: 100vh;
  .login-view {
    width: 400px;
    border: 1px solid $split-line-color;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16);
    border-radius: 20px;
    .login-title {
      text-align: center;
      height: 80px;
      line-height: 80px;
      color: #FFF;
    }
    .login-form {
      padding-right: 20px;
    }
    .btn-group {
      text-align: center;
      padding-bottom: 20px;
    }
    :deep(.el-form-item__label){
      color: #FFF;
    }
  }
}
</style>